<template>
    <div class="role-dialog">        <el-dialog
            :title="t('user.assignRoles')"
            v-model="dialogVisible"
            width="40%"
            :destroy-on-close="true"
            :close-on-click-modal="false"
        >
            <div v-loading="loading">                <div v-if="roles.length === 0" class="empty-tips">
                    <el-empty :description="t('user.noRolesAvailable')" />
                </div>
                <el-scrollbar v-else height="300px">
                    <el-checkbox-group v-model="selectedRoles">
                        <div class="role-item" v-for="role in roles" :key="role.id">
                            <el-checkbox :label="role.id">{{ role.name }}</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </el-scrollbar>
            </div>
            
            <template #footer>                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">{{ t('user.cancel') }}</el-button>
                    <el-button type="primary" @click="submitForm" :loading="submitLoading">
                        {{ t('user.confirm') }}
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import roleApi from '../../../../api/backendManage/auth/role'

const { t } = useI18n()
const dialogVisible = ref(false)
const loading = ref(false)
const submitLoading = ref(false)
const roles = ref<any[]>([])
const selectedRoles = ref<number[]>([])
const currentUserId = ref(0)

// 打开角色分配对话框
const open = async (userId: number, userName: string) => {
    dialogVisible.value = true
    loading.value = true
    currentUserId.value = userId
    
    try {
        // 获取所有角色列表
        const rolesRes = await roleApi.getRoleList()
        if (rolesRes.data && rolesRes.data.items) {
            roles.value = rolesRes.data.items
        }
        
        // 获取用户当前的角色
        const userRolesRes = await roleApi.getUserRoles(userId)
        if (userRolesRes.data) {
            selectedRoles.value = userRolesRes.data.map((role: any) => role.id)
        }
          } catch (error) {
        console.error('获取角色数据失败:', error)
        ElMessage.error(t('user.failedToLoadRoles'))
    } finally {
        loading.value = false
    }
}

// 提交表单分配角色
const submitForm = async () => {
    submitLoading.value = true
      try {
        await roleApi.assignUserRoles(currentUserId.value, selectedRoles.value)
        ElMessage.success(t('user.assignRolesSuccess'))
        dialogVisible.value = false
        
        // 触发更新事件
        const event = new CustomEvent('user.update')
        window.dispatchEvent(event)    } catch (error) {
        console.error('分配角色失败:', error)
        ElMessage.error(t('user.assignRolesFailed'))
    } finally {
        submitLoading.value = false
    }
}

// 暴露方法给父组件调用
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
.role-dialog {
    .empty-tips {
        padding: 20px 0;
    }
    
    .role-item {
        margin: 10px 0;
        padding: 8px;
        border-radius: 4px;
        
        &:hover {
            background-color: #f5f7fa;
        }
    }
}
</style>
